<template>
  <div class="regbox">
    <h1>
      注册
      <router-link to="/mine">
        <a href="###"></a>
      </router-link>
    </h1>
    <div class="regcon">
      <form action>
        <div>
          <input type="text" name id placeholder="请输入您的手机号码" />
          <a href="###" class="clearin"></a>
        </div>
        <div>
          <input type="text" name id placeholder="短信验证码" />
          <a href="###" class="getcode">获取验证码</a>
        </div>
        <div>
          <input type="text" name id placeholder="设置登陆密码" />
          <a href="###" class="clearin"></a>
        </div>
        <div class="regnow">确定</div>
      </form>
      <p class="service">
        注册即表示您已同意
        <a href="https://qiniu.freshfresh.com/sa/sensorsdata.min.js">《两鲜服务协议》</a>
      </p>
      <p class="gologin">
        <router-link to="/login">
          <a href="###">我有两鲜账号，去登录</a>
        </router-link>
      </p>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.regbox {
  background-color: #fafafa;
  position: fixed;
  height: 100%;
  width: 100%;
  .gologin {
    padding-top: 0.7rem;
    text-align: center;
    a {
      color: #498f45;
      font-weight: 500;
      border-bottom: 1px solid #498f45;
    }
  }
  .regcon {
    width: 6.56rem;
    margin: 0.8rem auto 0;
    text-align: center;
    color: #999;
    padding-top: 0.9rem;
    .regnow {
      background: #e5e5e5;
      color: #333;
      line-height: 0.86rem;
      border: 1px solid #d4d4d4;
      border-radius: 0.43rem;
      font-size: 0.36rem;
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      cursor: pointer;
    }
    .service {
      font-size: 0.25rem;
    }
    form {
      text-align: center;
    }
    a {
      color: #498f45;
      font-weight: 500;
    }
    .clearin {
      position: absolute;
      right: 0.1rem;
      top: 0.12rem;
      background: url(../images/wenben_shanchu.png) no-repeat;
      background-size: 0.35rem 0.35rem;
      width: 0.24rem;
      height: 0.24rem;
      display: inline-block;
      cursor: pointer;
      display: none;
      outline: none;
      background-position: center;
      padding: 0.2rem 0.2rem;
      background-color: white;
    }
    div {
      width: 6.56rem;
      margin: 0 auto 0.3rem;
      position: relative;
    }
    input {
      background: #fff;
      width: 6.56rem;
      line-height: 0.86rem;
      height: 0.86rem;
      display: block;
      border: 1px solid #e5e5e5;
      border-radius: 0.43rem;
      text-indent: 0.3rem;
      font-size: 0.28rem;
    }
    .getcode {
      color: #498f45;
      position: absolute;
      right: 0.3rem;
      top: 0.25rem;
    }
    input:focus {
      border: 1px solid #4b943c;
    }
  }

  h1 {
    height: 0.9rem;
    line-height: 0.9rem;
    background: #ffee3c;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    font-size: 0.36rem;
    font-weight: 500;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    a {
      position: absolute;
      left: 0.3rem;
      top: 0.22rem;
      background: url(../images/pre.jpg) no-repeat left top;
      background-size: 0.3rem 0.4rem;
      width: 0.3rem;
      height: 0.4rem;
      overflow: hidden;
      text-indent: -99rem;
    }
  }
}
</style>